<template>
  <div class="form-preview">
    <div class="preview-header">
      <h3>{{ formData.name }}</h3>
      <div class="form-info">
        <el-tag type="info">{{ formData._id || formData.id }}</el-tag>
        <el-tag :type="formData.status === '已发布' ? 'success' : 'warning'">
          {{ formData.status }}
        </el-tag>
        <span class="field-count">共 {{ fields.length }} 个字段</span>
      </div>
    </div>

    <div class="preview-content">
      <div v-if="fields.length === 0" class="empty-state">
        <el-empty description="暂无字段配置" />
      </div>
      
      <div v-else class="form-fields">
        <div 
          v-for="(field, index) in fields" 
          :key="field.id || index"
          class="field-preview"
          :class="`field-type-${field.type}`"
        >
          <div class="field-header">
            <div class="field-info">
              <span class="field-index">{{ index + 1 }}.</span>
              <span 
                v-if="getDisplayLabel(field)"
                class="field-label"
              >
                {{ getDisplayLabel(field) }}
              </span>
              <el-tag size="small" type="info" class="field-type">
                {{ getFieldTypeLabel(field.type) }}
              </el-tag>
              <el-tag v-if="field.required" size="small" type="danger">必填</el-tag>
            </div>
          </div>

          <div class="field-content">
            <!-- 文本域字段 -->
            <template v-if="field.type === 'textareaField'">
              <div class="field-demo">
                <el-input
                  type="textarea"
                  :placeholder="field.value?.placeholder || '请输入'"
                  :rows="(field.value?.rows ?? 3)"
                  readonly
                  class="demo-input"
                />
              </div>
              <div class="field-config">
                <p><strong>配置：</strong></p>
                <ul>
                  <li>占位提示：{{ field.value?.placeholder || '请输入' }}</li>
                  <li>行数：{{ (field.value?.rows ?? 3) }}</li>
                  <li>对齐方式：{{ getAlignmentText(field.value?.alignment) }}</li>
                </ul>
              </div>
            </template>

            <!-- 日期时间组字段 -->
            <template v-else-if="field.type === 'dateTimeGroup'">
              <div class="field-demo">
                <div class="datetime-group">
                  <span>{{ field.value?.year || '____' }}年</span>
                  <span>{{ field.value?.month || '__' }}月</span>
                  <span>{{ field.value?.day || '__' }}日</span>
                  <span>{{ field.value?.hour || '__' }}时</span>
                  <span>{{ field.value?.minute || '__' }}分</span>
                </div>
              </div>
              <div class="field-config">
                <p><strong>当前值：</strong></p>
                <ul>
                  <li>年：{{ field.value?.year || '未设置' }}</li>
                  <li>月：{{ field.value?.month || '未设置' }}</li>
                  <li>日：{{ field.value?.day || '未设置' }}</li>
                  <li>时：{{ field.value?.hour || '未设置' }}</li>
                  <li>分：{{ field.value?.minute || '未设置' }}</li>
                </ul>
              </div>
            </template>

            <!-- 单选带输入框字段 -->
            <template v-else-if="field.type === 'radioWithInput'">
              <div class="field-demo">
                <div class="radio-with-input">
                  <span class="prefix-label">{{ field.value?.label }}</span>
                  <div class="options">
                    <div 
                      v-for="option in field.value?.options || []" 
                      :key="option.value"
                      class="option-item"
                    >
                      <el-radio :value="option.value" disabled>{{ option.label }}</el-radio>
                      <el-input 
                        v-if="option.showInput" 
                        :placeholder="option.inputLabel || '请输入'"
                        class="inline-input"
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="field-config">
                <p><strong>选项配置：</strong></p>
                <ul>
                  <li v-for="option in field.value?.options || []" :key="option.value">
                    {{ option.label }} ({{ option.value }})
                    <span v-if="option.showInput">- 带输入框: {{ option.inputLabel }}</span>
                  </li>
                </ul>
              </div>
            </template>



            <!-- 标准表格字段 -->
            <template v-else-if="field.type === 'criteriaTable'">
              <div class="field-demo">
                <div class="criteria-table">
                  <h4 v-if="field.value?.title">{{ field.value.title }}</h4>
                  <el-table :data="field.value?.rows || []" border style="width: 100%">
                    <el-table-column 
                      v-for="column in field.value?.columns || []"
                      :key="column.id"
                      :prop="column.id"
                      :label="column.title"
                      :width="column.width"
                    >
                      <template #default="{ row }">
                        <template v-if="column.type === 'radio'">
                          <el-radio-group :value="row[column.id]" disabled>
                            <el-radio 
                              v-for="option in column.options || []"
                              :key="option.value"
                              :value="option.value"
                            >
                              {{ option.label }}
                            </el-radio>
                          </el-radio-group>
                        </template>
                        <template v-else>
                          {{ row[column.id] || '-' }}
                        </template>
                      </template>
                    </el-table-column>
                  </el-table>
                  <p v-if="field.value?.note" class="table-note">
                    备注：{{ field.value.note }}
                  </p>
                </div>
              </div>
            </template>

            <!-- 粘贴单字段 -->
            <template v-else-if="field.type === 'pasteUnit'">
              <div class="field-demo">
                <PasteUnitRender :fieldData="field.value" />
              </div>
              <div class="field-config">
                <p><strong>配置：</strong></p>
                <ul>
                  <li>字段名称：{{ field.value?.fieldName || (field.value?.styleType === 'style2' ? '报告单粘贴页' : '样本编号标签\n粘贴处') }}</li>
                  <li>样式类型：{{ field.value?.styleType === 'style2' ? '样式2(报告单)' : '样式1(样本单)' }}</li>
                  <li>尺寸：{{ field.value?.width || (field.value?.styleType === 'style2' ? 12 : 5) }}cm × {{ field.value?.height || 4 }}cm</li>
                  <li>对齐方式：{{ getAlignmentText(field.value?.alignment) }}</li>
                </ul>
              </div>
            </template>

            <!-- 其他字段类型 -->
            <template v-else>
              <div class="field-demo">
                <div class="unknown-field">
                  <el-alert 
                    title="未知字段类型" 
                    :description="`字段类型: ${field.type}`"
                    type="warning" 
                    show-icon 
                    :closable="false"
                  />
                </div>
              </div>
              <div class="field-config">
                <p><strong>原始配置：</strong></p>
                <pre>{{ JSON.stringify(field.value, null, 2) }}</pre>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <div class="preview-footer">
      <div class="form-stats">
        <el-statistic title="字段总数" :value="fields.length" />
        <el-statistic title="必填字段" :value="requiredFieldsCount" />
        <el-statistic title="最后更新" :value="formData.updateTime || '未知'" value-style="font-size: 12px;" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import PasteUnitRender from './render/PasteUnitRender.vue'

const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  fields: {
    type: Array,
    default: () => []
  }
})

// 字段类型标签映射
const fieldTypeLabels = {
  'textareaField': '文本域',
  'dateTimeGroup': '日期时间组',
  'radioWithInput': '单选带输入',
   
  'criteriaTable': '标准表格',
  'pasteUnit': '粘贴单',
  'signatureDate': '签字/日期'
}

// 获取字段类型标签
const getFieldTypeLabel = (type) => {
  return fieldTypeLabels[type] || type
}

// 计算用于展示的字段标题（为空/全空格时返回空字符串）
const getDisplayLabel = (field) => {
  const raw = (field.label ?? field.name ?? '').toString()
  const trimmed = raw.trim()
  return trimmed.length > 0 ? trimmed : ''
}

// 获取对齐方式文本
const getAlignmentText = (alignment) => {
  const alignmentMap = {
    'left': '靠左',
    'center': '居中',
    'right': '靠右'
  }
  return alignmentMap[alignment] || '靠左'
}

// 计算必填字段数量
const requiredFieldsCount = computed(() => {
  return props.fields.filter(field => field.required).length
})
</script>

<style lang="scss" scoped>
.form-preview {
  .preview-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    
    h3 {
      margin: 0 0 12px 0;
      color: #303133;
    }
    
    .form-info {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .field-count {
        color: #666;
        font-size: 14px;
      }
    }
  }
  
  .preview-content {
    padding: 20px;
    
    .form-fields {
      .field-preview {
        margin-bottom: 32px;
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .field-header {
          margin-bottom: 16px;
          
          .field-info {
            display: flex;
            align-items: center;
            gap: 12px;
            
            .field-index {
              font-weight: bold;
              color: #409EFF;
              min-width: 24px;
            }
            
            .field-label {
              font-weight: 600;
              color: #303133;
              font-size: 16px;
            }
            
            .field-type {
              font-size: 12px;
            }
          }
        }
        
        .field-content {
          .field-demo {
            margin-bottom: 16px;
            padding: 16px;
            background-color: #fafafa;
            border-radius: 4px;
            border: 1px dashed #ddd;
            
            .demo-input {
              background-color: white;
            }
            
            .datetime-group {
              display: flex;
              align-items: center;
              gap: 8px;
              font-family: monospace;
              
              span {
                padding: 4px 8px;
                background: white;
                border: 1px solid #ddd;
                border-radius: 4px;
              }
            }
            
            .radio-with-input {
              .prefix-label {
                margin-right: 16px;
                font-weight: 500;
              }
              
              .options {
                .option-item {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  margin-bottom: 12px;
                  
                  .inline-input {
                    width: 200px;
                  }
                }
              }
            }
            
            .signature-date-group {
              .signature-line,
              .date-line {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 12px;
                
                span {
                  white-space: nowrap;
                }
                
                .signature-input {
                  width: 200px;
                }
              }
            }
            
            .criteria-table {
              h4 {
                margin: 0 0 16px 0;
                text-align: center;
              }
              
              .table-note {
                margin-top: 12px;
                font-size: 12px;
                color: #666;
                font-style: italic;
              }
            }
          }
          
          .field-config {
            padding: 12px;
            background-color: #f8f9fa;
            border-radius: 4px;
            font-size: 14px;
            
            p {
              margin: 0 0 8px 0;
              color: #303133;
            }
            
            ul {
              margin: 0;
              padding-left: 20px;
              
              li {
                margin-bottom: 4px;
                color: #666;
              }
            }
            
            pre {
              margin: 8px 0 0 0;
              padding: 8px;
              background: white;
              border: 1px solid #ddd;
              border-radius: 4px;
              font-size: 12px;
              max-height: 200px;
              overflow: auto;
            }
          }
        }
      }
    }
  }
  
  .preview-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    background-color: #fafafa;
    
    .form-stats {
      display: flex;
      gap: 40px;
      justify-content: center;
    }
  }
  
  .empty-state {
    text-align: center;
    padding: 40px;
  }
}
</style>